<template>
  <div class="page">
    <LaunchedHeader></LaunchedHeader>
    <div class="inf">
      <LaunchedChoosePad style="float: left; margin-top:1em" @filepadchoice="GetShowItem"></LaunchedChoosePad>
      <div class="upper-class">
        <p :style="{'color': GetColor1}">已发布文献</p>
        <p :style="{'color': GetColor2}">已发布科研活动</p>
      
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <LaunchedFile style="margin-left:38%; margin-top: 4%" v-show="file === true"></LaunchedFile>
      <div v-show="collection === true" style="margin-left:38%; margin-top:4%" v-for="(d,index) in this.$store.state.essaylist" :key="index">
			<p class="align-center">{{index+1}}</p>
	      <SCIlaunched :index="index" :form="d"></SCIlaunched>
      </div>
    </div>
    
  </div>
</template> 

<script>
import LaunchedHeader from '../homela.vue'
import LaunchedFile from './launchedfile'
import LaunchedChoosePad from './launchedchoosepad'
import SCIlaunched from './SCIlaunch.vue'
export default {
  name: "launchedpage",
  components: {
    LaunchedHeader,
    LaunchedFile,
    LaunchedChoosePad,
    SCIlaunched
  },
  computed:{
    GetColor1:function(){
      return this.menucolor1;
    },
    GetColor2:function(){
      return this.menucolor2;
    },
    GetColor3:function(){
      return this.menucolor3;
    },
    GetColor4:function(){
      return this.menucolor4;
    },
  },
  data() {
    return{
      file:true,
      activeIndex: '1',
      msg: true,
      collection: false,
      inf: false,
      review: false,
      show_num: "",
      menucolor1: "black",
      menucolor2: "black",
      menucolor3: "black",
      menucolor4: "black",
       allComponents:[{
					        name:'宵宫',
            phone:'1314520',
            telling:'体验烟火，品味人生',
            actstate:'线下会议',
            actform:'点燃烟火，收集鸣草，提高命座'
				},
				{
					        name:'宵宫',
            phone:'1314520',
            telling:'体验烟火，品味人生',
            actstate:'线下会议',
            actform:'点燃烟火，收集鸣草，提高命座'}]
    }
  },
  methods:{
    gototolaunch(){
				this.$router.push('/tolaunch')
			},
    GetShowItem(v){
      this.show_num = v;
      if(this.show_num === '1'){
        this.file = true;
        this.collection = false;
        this.inf = false;
        this.review = false;
        this.menucolor1 = "deepskyblue";
        this.menucolor2 = "black";
        this.menucolor3 = "black";
        this.menucolor4 = "black";
      }
      else if(this.show_num === '2'){
        this.file = false;
        this.collection = true;
        this.inf = false;
        this.review = false;
        this.menucolor1 = "black";
        this.menucolor2 = "deepskyblue";
        this.menucolor3 = "black";
        this.menucolor4 = "black";
      }
      else if(this.show_num === '3'){
        this.file = false;
        this.collection = false;
        this.inf = true;
        this.review = false;
        this.menucolor1 = "black";
        this.menucolor2 = "black";
        this.menucolor3 = "deepskyblue"
        this.menucolor4 = "black";
        //this.$router.back();
        this.$router.push('../tolaunch')
      }
      else{
        this.file = false;
        this.collection = false;
        this.inf = false;
        this.review = true;
        this.menucolor1 = "black";
        this.menucolor2 = "black";
        this.menucolor3 = "black";
        this.menucolor4 = "deepskyblue";
        this.$router.push("/scholarpage");
      }
    },
  }
}
</script>

<style scoped>
.page{
  width:70em;
  margin: 0 auto;
}
.inf{
  margin-top:8%;
}
.person_inf{
  margin-top:20%;
}
.upper-class{
  margin-top:1em;
  float: right;
  width: 50em;
}
.upper-class p{
  float:left;
  margin-left:7em;
}
</style>